//获取应用实例
const app = getApp();

Page({
  data: {
    toView: "a1",
    activeId: "a1",
    category: [
      {
        name: "新品",
        id: "a1",
      },
      {
        name: "众筹",
        id: "a2",
      },
      {
        name: "小米手机",
        id: "a3",
      },
      {
        name: "redmi手机",
        id: "a4",
      },
      {
        name: "黑鲨游戏",
        id: "a5",
      },
      {
        name: "手机配件",
        id: "a6",
      },
      {
        name: "电视",
        id: "a7",
      },
      {
        name: "电脑",
        id: "a8",
      },
    ],
    content: [
      {
        title: "- 新品 -",
        options: [
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "001",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "002",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "003",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "004",
            text: "redmi8",
          },
        ],
        id: "a1",
      },
      {
        title: "- 众筹 -",
        options: [
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "005",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "006",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "007",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "008",
            text: "redmi8",
          },
        ],
        id: "a2",
      },
      {
        title: "- 小米手机 -",
        options: [
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "009",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0010",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0011",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0012",
            text: "redmi8",
          },
        ],
        id: "a3",
      },
      {
        title: "- redmi手机 -",
        options: [
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0013",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0014",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0015",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0016",
            text: "redmi8",
          },
        ],
        id: "a4",
      },
      {
        title: "- 黑纱 -",
        options: [
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0019",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0020",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0021",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0022",
            text: "redmi8",
          },
        ],
        id: "a5",
      },
      {
        title: "- 手机配件 -",
        options: [
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0023",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0024",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0025",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0026",
            text: "redmi8",
          },
        ],
        id: "a6",
      },
      {
        title: "- 电视 -",
        options: [
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0027",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0028",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0029",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0030",
            text: "redmi8",
          },
        ],
        id: "a7",
      },
      {
        title: "- 电视 -",
        options: [
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0031",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0032",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0033",
            text: "redmi8",
          },
          {
            src: "http://qiniu.picgo.srliforever.ltd/20230821215349.png",
            id: "0034",
            text: "redmi8",
          },
        ],
        id: "a8",
      },
    ],
    heightArr: [],
  },
  onLoad: function () {
    this.setData({
      toView: "a1",
      heightArr: [],
    });
    let query = wx.createSelectorQuery(); // 创建节点查询器 query
    query
      .selectAll(".catefory-main") // 选择类目节点
      .boundingClientRect((rect) => {
        // 查询节点信息
        rect.forEach((ele) => {
          // 遍历节点信息
          this.calculateHeight(ele.height); // 计算每个节点的高度
        });
      })
      .exec();
  },
  /**
   *  计算每个节点的高度
   * @param {*} height
   */
  calculateHeight(height) {
    let heightArr = this.data.heightArr; // 获取高度数组
    let heightLen = heightArr.length; // 获取高度数组的长度
    if (heightLen == 0) {
      // 如果高度数组的长度为0
      heightArr.push(height); // 直接添加进去第一个高度
    } else {
      // 如果高度数组的长度不为0
      heightArr.push(height + heightArr[heightLen - 1]); // 将当前高度与前一个高度相加
    }
    this.setData({
      // 设置高度数组
      heightArr: heightArr,
    });
  },

  /**
   * 右侧滚动事件
   * @param {*} e
   */
  scroll(e) {
    let scrollHeight = e.detail.scrollTop; // 获取滚动的高度
    let index = this.calculateIndex(this.data.heightArr, scrollHeight); // 计算左侧选中的下标
    this.setData({
      activeId: "a" + index, // 设置左侧选中的下标
    });
  },

  /**
   * 计算左侧选中的下标
   * @param {*} arr
   * @param {*} scrollHeight
   * @returns
   */
  calculateIndex(arr, scrollHeight) {
    let index = ""; // 定义初始化下标
    for (let i = 0; i < arr.length; i++) {
      // 遍历高度数组
      if (scrollHeight >= 0 && scrollHeight < arr[0]) {
        // 如果滚动的高度大于等于0并且小于第一个高度,说明滚动到了第一个节点
        index = 0; // 设置下标为0
      } else if (scrollHeight >= arr[i - 1] && scrollHeight < arr[i]) {
        // 如果滚动的高度大于等于前一个高度并且小于当前高度,说明滚动到了当前节点
        index = i; // 设置下标为当前下标
      }
    }
    return index + 1; // 返回下标
  },

  /**
   * 点击左侧菜单栏
   * @param {*} e
   */
  clickItem(e) {
    this.setData({
      // 设置左侧选中的下标
      activeId: e.currentTarget.dataset.id, // 设置左侧选中的下标
      toView: e.currentTarget.dataset.id, // 设置右侧滚动的id
    });
  },

  /**
   * @param {*} e 当前点击的商品源
   * @returns {void} 
   * @description 商品数量减少
   */
  minus(e) {
    let parentIndex = e.currentTarget.dataset.parentIndex, // 获取父级下标
      index = e.currentTarget.dataset.index; // 获取当前下标
    let content = this.data.content; // 获取商品列表
    let num = content[parentIndex].options[index].num; // 获取当前商品的数量
    if (!num) num = 0; // 默认情况下,当前商品对象信息中不包含num属性,所以num为undefined,必须手动重置为0才行

    if (num > 0 && num) {
      // 如果数量大于0
      content[parentIndex].options[index].num--; // 数量减1
      this.setData({
        // 设置商品列表
        content: content,
      });
    } else {
      // 如果数量小于等于0
      wx.showToast({
        // 提示
        title: "不能再少了",
        icon: "none",
      });
    }
  },


  /**
   * @param {*} e  当前点击的商品源
   * @returns {void}
   * @description 商品数量增加
   */
  add(e) {
    let parentIndex = e.currentTarget.dataset.parentIndex, // 获取父级下标
      index = e.currentTarget.dataset.index; // 获取当前下标
    let content = this.data.content; // 获取商品列表
    let num = content[parentIndex].options[index].num; // 获取当前商品的数量
    // 如果是undefined，就设置为0
    if (!num) num = 0; // 默认情况下,当前商品对象信息中不包含num属性,所以num为undefined,必须手动重置为0才行
    content[parentIndex].options[index].num = ++num; // 数量加1
    this.setData({
      content: content,
    });
  },
});
